<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件封装</title>
    <link rel="stylesheet" href="./qf-ui.css">
</head>
<body>
<div id="root">

    <!-- 导航组件 -->

    <div class="msgSearch">
        <h1>导航组件</h1>
    <san-bottom-tip :msg="msgSearchData" class="msgSearchData"></san-bottom-tip>
    </div>
    <hr>
    <nav-bar :show-status="true" title="会员中心" @left-click="localFn" @right-click="alertFn" :value="msg" @input="data=>msg=data"></nav-bar>
    <ol class="search">
        <li v-for="item in searchData">{{ item.q }}</li>
    </ol>
    <san-top-tip :msg="msgNavData"></san-top-tip>


    <!-- 登录组件 -->



    <hr>
    <h1>登录组件</h1>
    <button @click="visibleData=true">点击登录</button>
    <qf-dialog title="登录组件" content="是否确定登陆" :visible="visibleData" @update:visible="visibleData=false"></qf-dialog>



    <!-- 按钮组件 -->



    <hr>
    <h1>按钮组件</h1>
    <hr>
    <!--    
     <qf-button
            slot-data="zhuyaoanniu" =》决定组件中的【具名插槽name】
            #zhuyaoanniu           =》匹配具名插槽
            type="primary"         =》控制显示样式
            @click="alertWarnFn('这是主要按钮哦')" =》重写事件 后期进行逻辑处理
     >主要按钮</qf-button> -->
    <qf-button slot-data="zhuyaoanniu" #zhuyaoanniu type="primary" @click="alertWarnFn('这是主要按钮哦')">主要按钮</qf-button>
    <qf-button slot-data="chenggonganniu" #chenggonganniu type="success" @click="alertWarnFn('你成功了，很棒')">成功按钮
    </qf-button>
    <qf-button slot-data="morenanniu" #morenanniu type="default" @click="alertWarnFn('点击默认按钮为你服务')">默认按钮</qf-button>
    <qf-button slot-data="jinggaoanniu" #jinggaoanniu type="warning" @click="alertWarnFn('警告⚠️')">警告按钮</qf-button>
    <qf-button slot-data="weixiananniu" #weixiananniu type="danger" @click="alertWarnFn('危险危险！好久不见！')">危险按钮</qf-button>
    <san-top-tip :msg="msgBtnData"></san-top-tip>

    <!-- 表格组件 -->


    <hr>
    <h1>表格组件</h1>
    <hr>
    <!-- 
    <qf-table
        :columns="columns" =》控制列数
        :data="tableData" =》控制行数
     ></qf-table> -->
    <qf-table :columns="columns" :data="tableData"><san-left-tip :msg="msgTableData" class="table-tip"></san-left-tip></qf-table>


    <!-- 表单组件 -->


    <hr>
    <h1>表单组件（创建用户）</h1>
    <hr>
    <!--  <qf-form
        first-data="用户"  =》传入第一个框的提示信息
        second-data="密码" =》传入第二个框的提示信息
        third-data="密保"  =》传入第三个框的提示信息
        four-data="答案"   =》传入第四个框的提示信息
        input-type="password" =》控制第二个input框的类型
        :visible="true"       =》控制组件内提交按钮是否显示
        @submit="submitFn"    =》重写事件 后期进行逻辑处理
    ></qf-form> -->
    <qf-form :first-data="users[0]" :second-data="users[1]" :third-data="users[2]" :four-data="users[3]" input-type="password" :visible="true"
        @submit="submitFn"></qf-form>


    <h1>表单组件（创建商品）</h1>
    <hr>
    <!-- 根据ref属性后期获取相对应的组件进行操作 -->
    <qf-form :first-data="orders[0]" :second-data="orders[1]" :third-data="orders[2]" :four-data="orders[3]" ref="goods" @submit="submitFn">
        <hr>
        <!-- 组件外提交按钮 进行逻辑操作 -->
        <button @click="submitGoodsFn">点击提交</button>
    </qf-form>


    <!-- 分页插件 -->
    <h1>分页组件</h1>
    <!--  <page
        :total-num=100  =》总数据条数
        :page-Size=10   =》一页可以显示的数据条数
        @click-page="pageChooseFn" =》点击相应页码进行逻辑处理的函数
    ></page> -->
    <page :total-num=100 :page-Size=10 @click-page="pageChooseFn"></page>
    <h1>loading组件</h1>

    <loading @click="visibleFn" :visible="visible">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0118895a8ad95fa80121923179234a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648967707&t=9cda5cbfa619d1249bc65edd65a9edd1"
            alt="">
    </loading>
    <san-top-tip :msg="msgLoadData"></san-top-tip>
    <br>
    <br>
    <br>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qf-ui.js"></script>
<script>
    Vue.config.productionTip = false
</script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            msgSearchData:'在这里试一试 能查东西呢',
            msgTableData:'左侧为我们最新设计的表格组件',
            msgLoadData:'点击会加载loading组件',
            msgBtnData:'点击上图各个按钮会有弹出提示',
            msgNavData:'点击这里返回百度首页',
            msg: "",
            users:['用户','密码','密保','答案'],
            orders:['商品名','商品ID','商品价格','商品描述'],
            searchData: [],
            visible: false,
            visibleData: false,
            columns: [{
                    title: '编号',
                    key: 'goods_id'
                },
                {
                    title: '商品名',
                    key: 'goods_name'
                },
                {
                    title: '价格',
                    key: 'goods_price'
                },
                {
                    title: '描述',
                    key: 'goods_desc'
                },
                {
                    title: '测试',
                    key: 'goods_test'
                }
            ],
            tableData: [{
                    goods_id: 1,
                    goods_name: "商品1",
                    goods_price: 1,
                    goods_desc: "nice",
                    goods_test: "nice"
                },
                {
                    goods_id: 2,
                    goods_name: "商品2",
                    goods_price: 2,
                    goods_desc: "nice",
                    goods_test: "nice"
                },
                {
                    goods_id: 3,
                    goods_name: "商品3",
                    goods_price: 3,
                    goods_desc: "nice",
                    goods_test: "nice"
                },
                {
                    goods_id: 4,
                    goods_name: "商品4",
                    goods_price: 4,
                    goods_desc: "nice",
                    goods_test: "nice"
                },
                {
                    goods_id: 4,
                    goods_name: "商品4",
                    goods_price: 4,
                    goods_desc: "nice",
                    goods_test: "nice"
                }
            ]
        },
        methods: {
            visibleFn() {
                this.visible = !this.visible
            },
            pageChooseFn(num) {
                alert(`跳转至第${num}页`)
            },

            submitGoodsFn() {
                alert('请求接口中.....')
                console.log(this.$refs.goods.formData);
            },

            submitFn(data) {
                alert('请求接口中.....')
                console.log('获取表单数据：', data);
            },

            alertFn() {
                alert('会员中心')
            },

            localFn() {
                window.location.href = 'https://www.baidu.com'
            },

            alertWarnFn(data) {
                alert(`${data}!`)
            }
        },
        watch: {
            msg() {
                fetch(`https://www.baidu.com/sugrec?prod=pc&wd=${this.msg}`, {
                        method: 'get'
                    })
                    .then(res => res.json())
                    .then(res => {
                        this.searchData = res.g
                    })
            }
        }
    })
</script>
</html>